<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客首页</title>
    <!-- 引入 Semantic UI 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <style>
        body > .grid {
            margin: 0;
            height: 100%;
        }
        .main.container {
            margin-top: 7em; /* 导航栏的高度 */
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            justify-content: space-between;
        }
        .left-content {
            flex: 3;
        }
        .right-content {
            flex: 1;
            padding: 20px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .personal-avatar img {
            width: 150px; /* 头像宽度 */
            height: 150px; /* 头像高度 */
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 20px;
        }
        .personal-info {
            text-align: left;
            margin-top: 20px;
        }
        .statistic {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .statistic .stat-item {
            text-align: center;
        }
        .article-list {
            margin-top: 20px;
        }
        .article-item {
            padding: 20px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .edit-button {
            margin-top: 20px;
        }
        .ui.button.primary {
            background-color: #3388ff;
        }
        .ui.button.primary:hover {
            background-color: #2276d2;
        }
    </style>
</head>
<body>

    <!-- 导航栏 -->
   <nav class="ui inverted  attached segment m-padded-tb-mini">
   	<div class="ui container">
   	<div class="ui inverted secondary menu">
   		<h2 class="ui teal header item">管理后台</h2>
   		<a class="item active" href="#home">
   		    <i class="home icon"></i> 博客首页
   		</a>
   		<a class="item" href="文章管理.html">
   		    <i class="write icon"></i> 文章管理
   		</a>
   		<a class="item" href="文章发布.html">
   		    <i class="edit icon"></i> 文章发布
   		</a>
   		<a class="item" href="分类管理.html">
   		    <i class="folder open icon"></i> 分类管理
   		</a>
   		<a class="item" href="标签管理.html">
   		    <i class="tag icon"></i> 标签管理
   		</a>
   		<a class="item" href="用户管理.html">
   		    <i class="settings icon"></i> 用户管理
   		</a>
		<div class="right menu">
			<div class="ui dropdown item">
				<div class="text">
					<img class="ui avatar image" src="">
					用户名
				</div>
				<i class="dropdown icon"></i>
				<div class="menu">
					<a href="#" class="item">注销</a>
					
				</div>
				
				
			</div>
			
		</div>
   		
   		
   		</div>
   	</div>
   	</div>
   </nav>
   <!-- 页面内容 -->
   <div class="main container">
       <div class="left-content">
           <!-- 文章、分类和标签统计 -->
           <div class="statistic">
               <div class="stat-item">
                   <div class="ui statistic">
                       <div class="value">42</div>
                       <div class="label">文章数量</div>
                   </div>
               </div>
               <div class="stat-item">
                   <div class="ui statistic">
                       <div class="value">21</div>
                       <div class="label">分类数量</div>
                   </div>
               </div>
               <div class="stat-item">
                   <div class="ui statistic">
                       <div class="value">35</div>
                       <div class="label">标签数量</div>
                   </div>
               </div>
           </div>
   

            <!-- 个人信息 -->
            <div class="personal-info">
                <div class="personal-avatar">
                    <img src="path_to_your_avatar.jpg" alt="用户头像">
                </div>
                <h3 class="ui header">个人信息</h3>
                <p>用户名: <strong>张三</strong></p>
                <p>邮箱: <strong>zhangsan@example.com</strong></p>
                <p>注册时间: <strong>2024-01-01</strong></p>
                <p>个人简介: <strong>这是一个个人简介的段落。</strong></p>
                <button class="ui button primary edit-button">
                    <i class="edit icon"></i>
                    编辑
                </button>
            </div>
        </div>

        <div class="right-content">
            <!-- 最新发布的文章列表 -->
            <div class="article-list">
                <h2 class="ui header">最新文章</h2>
                <div class="article-item">
                    <h4>文章标题1</h4>
                    <p>文章摘要或简介...</p>
                </div>
                <!-- 更多文章列表项 -->
            </div>
        </div>
    </div>

    <!-- 引入 Semantic UI 的 JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <script>
        // 这里可以初始化一些JavaScript代码，如果需要的话
	  $('.ui.dropdown').dropdown();
    </script>

</body>
</html>